<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>state简写方式</title>
  </head>
  <body>
    <div id="test"></div>
    <!-- 引入react核心库  优先 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom用于支持react操作DOM，依赖react核心库 -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转换为js -->
    <script type="text/javascript" src="../js//babel.min.js"></script>
    <script type="text/babel">
      class Weather extends React.Component {
        //初始化状态
        state = { isHot: true, wind: "微风" };
        render() {
          const { isHot, wind } = this.state;
          return (
            <h2 onClick={this.changeData}>
              今天天气不错啊，是个{isHot ? "大热天" : "凉爽天"},-----{wind}
            </h2>
          );
        }
        //自定义方法，要用赋值语句的形式 + 箭头函数
        changeData = () => {
          this.setState({
            isHot: !this.state.isHot,
          });
        };
      }
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
    ;
  </body>
</html>
